<!DOCTYPE html><html><head><title>19-iframe框架+阿里图标</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="19-iframe框架阿里图标">19-iframe框架+阿里图标</h1>

<h3 id="一iframe内联框架">一、iframe内联框架</h3>

<p>iframe 是个内联框架（内嵌框架），是在页面（body）里生成个内部框架。 <br>
属性：</p>

<blockquote>
  <ul><li>width        定义iframe的宽度；</li>
  <li>height       定义iframe的高度；</li>
  <li>name     规定框架的名称</li>
  <li>src          规定在框架中显示的文档的 URL。</li>
  <li>frameborder      规定是否显示框架周围的边框 <br>
  <ul>
  <li>值： 0无</li>
  <li>1有</li></ul></li>
  <li>scrolling    规定是否在框架中显示滚动条。 <br>
  <ul>
  <li>yes    显示滚动条（和 auto）           </li>
  <li>no 无</li>
  <li>auto   根据内容自动显示滚动条</li></ul></li>
  </ul>
</blockquote>



<h3 id="二css继承">二、css继承</h3>

<p>CSS继承指的是，特定的CSS属性向下传递到子孙元素 <br>
    1、默认继承的有：</p>

<blockquote>
  <p>color、font、text-align、text-indent、letter-spacing、word-spacing、list-style—-只继承ul……</p>
</blockquote>

<p>2、a 标签的color值不继承 <br>
3、默认不继承的给属性加inherit</p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line"><span class="hljs-attribute">background</span>:inherit;
</div></code></pre>



<h3 id="三css重用">三、css重用</h3>

<p>css重用：一个代码多次利用,通过添加特定的class类来实现 <br>
例如： <br>
    .fL{float:left;} <br>
    .fR{float:right}    </p>



<h4 id="四组件化开发">四、组件化开发</h4>

<p>组件化开发：网页中不同功能模块，写入不同的css文件</p>



<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">“stylesheet</span>" <span class="hljs-attr">href</span>=<span class="hljs-string">"url路径"</span>  <span class="hljs-attr">type</span>=<span class="hljs-string">“type/css</span>"&gt;</span>
</div></code></pre>



<h3 id="五网站logo">五、网站logo</h3>

<p>1、首先得有一个.ico 作为扩展名 文件 <br>
2、引入：</p>



<pre class="prettyprint hljs-dark"><code class="hljs flix"><div class="hljs-line">&lt;link <span class="hljs-keyword">rel</span>=<span class="hljs-string">"shortcut icon"</span> href=<span class="hljs-string">"/dir/favicon.ico"</span><span class="hljs-keyword">type</span>=<span class="hljs-string">"image/x-icon"</span>&gt;
</div></code></pre>



<h3 id="六阿里图标">六、阿里图标</h3>

<p><strong>1、下载阿里字体图标</strong></p>

<blockquote>
  <p>1、找到阿里图标 <br>
              a、打开百度搜索   ‘ 阿里图标‘ <br>
      b、点击进去会进入 阿里图标首页地址：                                 <a href="http://www.iconfont.cn/plus" target="_blank">http://www.iconfont.cn/plus</a> <br>
      c、注册一个账号，方便后面的图标统一管理 <br>
      d、找到导航栏中的 —图标库—下方的—官方图标库，这里有很多官方的图标</p>
</blockquote>

<p><strong>2、举例：</strong></p>

<blockquote>
  <p>下载（以天猫图标为例） <br>
  a 在页面中找到 –天猫图标库– <br>
  b 找到需要的图标，鼠标滑入有–添加入库–选项,如此依次操作 <br>
  c 都添加好后，在顶部导航栏找到—购物车图标—点击 <br>
  d 如果 选中下面的—添加到项目–可以保存起来，方便下次再用，也可以实现与你之前的图标合并， <br>
  f 如果 选中 —下载—就直接下载了</p>
</blockquote>

<p><strong>3、阿里图标使用</strong> <br>
1、下载解压后，会可以看到下面的文件</p>



<p><img longdesc="./1520063222041.png" alt="Alt text" title="" type="image/png" src="" class=""> <br>
    2、把图中全选，在我们项目的文件夹新建一个iconfont文件夹，然后黏贴在里面 <br>
    3、使用在项目中使用link标签引入iconfont中的 iconfont.css：</p>



<pre class="prettyprint hljs-dark"><code class="hljs flix"><div class="hljs-line">&lt;link <span class="hljs-keyword">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-keyword">type</span>=<span class="hljs-string">"text/css“href="</span>./iconfont.css<span class="hljs-string">"&gt;</span>
</div></code></pre>

<p>4、在需要使用阿里图标的class中添加iconfont类名：</p>



<pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span>
</div></code></pre>

<p>5、点击demo_fontclass.html文档，在浏览器中打开</p>



<p><img longdesc="./1520063301258.png" alt="Alt text" title="" type="image/png" src="" class=""> <br>
6、找到需要的图标，复制下面的icon-xxx名字到<i class="iconfont icon-xxx"></i>作为标签的类型，这样图标就OK了 </p>



<p><img longdesc="./1520063306637.png" alt="Alt text" title="" type="image/png" src="" class=""></p></div></body></html>